<template>
    <div class="file-view" v-if="showView">
        <header>
            <span />
            <h2>{{imgName}}</h2>
            <span class="el-icon-close icon" @click="close" />
        </header>
        <main>
            <div :style="[zoom,rotate]" class="basic">
                <preview ref="preview" :imgItem="activeImg"></preview>
            </div>
        </main>
        <footer>
            <div class="operations">
                <!-- 放大 -->
                <span class="el-icon-circle-plus-outline" v-show="showZoomInAndOut" @click="operations('zoomIn')" />
                <!-- 缩小 -->
                <span class="el-icon-remove-outline" v-show="showZoomInAndOut" @click="operations('zoomOut')" />
                <!-- 原图 -->
                <span class="el-icon-view" @click="operations('resetImg')" />
                <!-- 上一张 -->
                <span class="el-icon-back" @click="operations('prevImg')" />
                <!-- 下一张 -->
                <span class="el-icon-right" @click="operations('nextImg')" />
                <!-- 左翻转 -->
                <span class="el-icon-refresh-left" @click="operations('rotateLeft')" />
                <!-- 右翻转 -->
                <span class="el-icon-refresh-right" @click="operations('rotateRight')" />
                <!-- 下载 -->
                <span class="el-icon-download" @click="operations('downLoad')" v-if="downLoad" />
            </div>
            <ul class="small-view-ul">
                <li
                    v-for="(item,index) in fileList"
                    :key="item[dKey]||item.url"
                    :class="{'active-li':index===viewIndex}"
                    @click="changeBigImg(index)"
                >
                    <img v-if="item.type==='image'" :src="item.url" alt />
                    <img v-if="item.type==='pdf'" src="@/assets/images/fileIco/pdf.png" alt />
                </li>
            </ul>
        </footer>
    </div>
</template>

<script lang="tsx">
import { Component, Vue } from "vue-property-decorator";
import preview from "./previewRender";
@Component({
    name: "ZbFileView",
    components: {
        preview
    }
})
export default class ZbFileView extends Vue {
    showView: boolean = true;
    zoomRatio: number = 0;
    rotateRatio: number = 0;

    get imgName() {
        const me = this as any;
        return me.fileList[me.viewIndex].name || "";
    }
    get activeImg() {
        const me = this as any;
        return me.fileList[me.viewIndex];
    }
    get zoom() {
        return {
            height: `${(1 + this.zoomRatio) * 70}vh`
        };
    }
    get rotate() {
        return {
            transform: `rotate(${this.rotateRatio}deg)`
        };
    }

    get showZoomInAndOut() {
        const me = this as any;
        return me.fileList[me.viewIndex].type === 'image';
    }

    operations(param: string) {
        const me = this as any;
        switch (param) {
            case "zoomIn":
                me.zoomRatio = me.zoomRatio + 0.3 > 2 ? 2 : me.zoomRatio + 0.3;
                break;
            case "zoomOut":
                me.zoomRatio =
                    me.zoomRatio - 0.3 < -0.6 ? -0.6 : me.zoomRatio - 0.3;
                break;
            case "resetImg":
                me.zoomRatio = 0;
                me.rotateRatio = 0;
                break;
            case "prevImg":
                me.viewIndex === 0
                    ? (me.viewIndex = me.fileList.length - 1)
                    : me.viewIndex--;
                me.zoomRatio = 0;
                break;
            case "nextImg":
                me.viewIndex >= me.fileList.length - 1
                    ? (me.viewIndex = 0)
                    : me.viewIndex++;
                me.zoomRatio = 0;
                break;
            case "rotateLeft":
                me.rotateRatio = me.rotateRatio - 90;
                break;
            case "rotateRight":
                me.rotateRatio = me.rotateRatio + 90;
                break;
            case "downLoad":
                me.downLoad(me.activeImg);
                break;
        }
    }
    changeBigImg(index: any) {
        const me = this as any;
        me.viewIndex = index;
        me.zoomRatio = 0;
    }
    close() {
        const me = this as any;
        me.showView = false;
    }
}
</script>

<style scoped lang='scss'>
.file-view {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.8);

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 6vh;
        position: absolute;
        z-index: 9999;
        width: 98%;
        padding: 0 1%;

        .icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            border: 2px solid #fff;
            border-radius: 50%;
            cursor: pointer;
            transition: 0.5s;
            transform: scale(0.8);

            &:hover {
                transform: rotate(90deg);
            }
        }
    }

    main {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .basic {
            transition: transform 0.8s, height 0.8s;
            position: absolute;
        }
    }

    footer {
        height: 130px;
        width: 100%;
        position: absolute;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .operations {
            user-select: none;
            font-size: 30px;
            display: flex;
            align-items: center;

            span {
                cursor: pointer;
                transition: 0.8s;
                transform: scale(0.8);

                &:hover {
                    transform: scale(1);
                }
            }
        }

        .small-view-ul {
            display: flex;

            li {
                display: flex;
                width: 100px;
                overflow: hidden;
                margin: 0 5px;
                height: 80px;
                cursor: pointer;

                img {
                    width: 100%;
                }
            }

            .active-li {
                border: 1px solid white;
            }
        }
    }
}
</style>
